<template>
	<view class="content">
		<tai-card padding="64rpx 48rpx 80rpx">
			<view class="tai-card__content">
				<view class="text-center u-font-lg">
					添加过程中，请根据提示，在指纹采集器上进行多次的抬起，按压
				</view>
				<view class="margin-top-lg" style="height: 200rpx"></view>
				<u-button
					class="margin-tb-xl"
					type="primary"
					size="medium"
					style="width: 100%"
					:customStyle="{'width': '100%'}"
					@click="addFingerprint"
				>
					开始添加
				</u-button>
			</view>
		</tai-card>
	</view>
</template>

<script>
	import TaiCard from '@/components/tai-card/index.vue'
	import { uploadQuantity } from '@/api/device/lock'
	
	export default {
		components: {
			TaiCard
		},
		data() {
			return {
				total: 0,
				lockId: '',
				lockData: ''
			}
		},
		onLoad({lockId, lockData}) {
			this.lockId = lockId;
			this.lockData = lockData;
		},
		methods: {
			addFingerprint() {
				uni.showLoading();
				requirePlugin("myPlugin", ({ addFingerprint }) => {
					// 蓝牙开锁
					addFingerprint({
						startDate: 0,
						endDate: 0,
						lockData: this.lockData,
						callback: (res) => {
							console.log(res);
							if (res.type == 2) {
								uni.showLoading({
									title: "请按手指添加指纹"
								})
							} else if (res.type == 3) {
								uni.showLoading({
									title: `当前录入${res.currentCount}/${res.totalCount}`
								});
							}
						},
					}).then(res => {
						console.log(res);
						uni.hideLoading();
						uni.showToast({title: res.errorMsg || "操作失败", icon: 'none'});
						if (res.errorCode == 0) {
							// 此处可以更新电量信息
							this.uploadQuantity(res.electricQuantity);
							console.log("电量：>>>", res.electricQuantity);
						}
					});
				});
			},
			// 更新电量
			async uploadQuantity(electricQuantity) {
				let params = {
					lockId: this.lockId,
					electricQuantity
				}
				await uploadQuantity(this.lockId, params);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 32rpx;
	}
	.tai-card__content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		/deep/ .u-size-medium {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
		}
	}
</style>